<template>
	<view class="container">
		<view class="info">
			<view class="left">头像</view>
			<view class="right"><image :src="avatarUrl" mode="aspectFill" @click="upuserimg"></image></view>
		</view>
		<view class="info">
			<view class="left">昵称</view>
			<input class="right" type="text" v-model="nickName" cursor="right" placeholder="输入昵称"/>
		</view>
		<view class="info">
			<view class="left">注册手机号</view>
			<input class="right" type="number" v-model="phone" placeholder="输入联系人手机号" disabled style="opacity: 0.7;"/>
		</view>
		<view class="info">
			<view class="left">性别</view>
			<u-radio-group v-model="sex">
				<u-radio active-color="#F09238" @change="check" name="2">未知</u-radio>
				<u-radio active-color="#F09238" @change="check" name="0">男</u-radio>
				<u-radio active-color="#F09238" @change="check" name="1">女</u-radio>
			</u-radio-group>
		</view>
		<!-- <view class="info">
			<view class="left">联系人手机号</view>
			<input class="right" type="number" v-model="urgentPhone" placeholder="输入联系人手机号" disabled style="opacity: 0.7;"/>
		</view> -->
		<view class="info" v-if="elderlyStatus==0" @click="msg('审核中','none')">
			<view class="left">身份认证</view>
			<view>
				<text class="text">正在审核</text>
				<u-icon name="arrow-right" color="#909090" size="20"></u-icon>
			</view>
		</view>
		<view class="info" @click="navto" v-else>
			<view class="left">身份认证</view>
			<view>
				<text class="text">{{type==2?"去认证":type==0?"义工":"老人"}}</text>
				<u-icon name="arrow-right" color="#909090" size="20"></u-icon>
			</view>
		</view>
		<!-- <view class="info">
			<view class="left">地址</view>
			<view>
				<text class="text" @click="value = true">{{city}}</text>
				<u-icon name="arrow-right" color="#909090" size="20"></u-icon>
			</view>
		</view> -->
		<view class="set" @click="setuser">修改</view>
		<!-- <cityselect  v-model="value" @city-change="cityChange" @isshow="value=false"></cityselect> -->
	</view>
</template>

<script>
	import cityselect from"../../../components/cityselect.vue"
	import {setuserinfo} from"../../../api/user.js"
	export default{
		data(){
			return{
				avatarUrl:"http://cloud.bxwhl.com/assets/common/img/header.png",
				sex:'2',
				nickName:'',
				urgentPhone:'',
				value:false,
				city:'请选择',
				type:null,
				elderlyStatus:null,
				phone:""
			}
		},
		components:{
			cityselect
		},
		onLoad() {
			let data=uni.getStorageSync("user")
			this.avatarUrl=data.avatarUrl;
			this.sex=data.gender;
			if(data.gender==null){
				this.sex=2
			}
			// if(data.urgentPhone==null){
			// 	this.urgentPhone=data.phone
			// }else{
			// 	this.urgentPhone=data.urgentPhone
			// }
			this.phone=data.phone
			this.nickName=data.username
			this.type=data.userType
			this.elderlyStatus=data.elderlyStatus
		},
		methods:{
			async setuser(){
				if(this.nickName.trim()==""){
					this.msg("昵称未填写","none")
					return
				}
				// if(!this.$u.test.mobile(this.urgentPhone)){
				// 	this.msg("未填写正确的手机号","none")
				// 	return
				// }
				let data={
					username:this.nickName,
					avatarUrl:this.avatarUrl,
					// urgentPhone:this.urgentPhone,
					gender:parseInt(this.sex)
					}
				let res=await this.post(setuserinfo,data)
				this.msg('修改成功')
				setTimeout(()=>{
					uni.navigateBack({
						delta:1
					})
				},1500)
			},
			navto(){
				if(this.type==2){
					uni.navigateTo({
						url:"/pages/user/info/authentication"
					})
				}else if(this.type==1||this.type==0){
					uni.navigateTo({
						url:"/pages/user/info/oldUserInfo"
					})
				}
				
			},
			check(e){
				console.log(this.sex)
				
			},
			upuserimg(){
				this.upimg((res)=>{
					console.log("头像",res)
					this.avatarUrl=res
				})
			},
			cityChange(e) {
				this.city = e.province.name + '-' + e.city.name + '-' + e.area.name+ '-' + e.street.name;
				console.log(this.city)
			}
		}
	}
</script>

<style>
	.container{
		padding: 30rpx;
	}
	.info{
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
		border-bottom: 1px solid #ededed;
		padding-bottom: 30rpx;
		margin-bottom: 30rpx;
	}
	
	image{
		width: 66rpx;
		height: 66rpx;
	}
	.left{
		/* width: 80%; */
	}
	.right{
		/* width: 20%; */
		min-width: 100rpx;
		max-width: 250rpx;
		text-align: right;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}
	.text{
		font-size: 28rpx;
		font-weight: bold;
		color: #F09238;
		margin-right: 20rpx;
	}
	.set{
		width: 594rpx;
		height: 80rpx;
		margin: 125rpx auto 0;
		background: linear-gradient(180deg, #F09238 0%, #EC5F2A 100%);
		border-radius: 40rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 30rpx;
		color: #FFFFFF;
	}
</style>
